<template>
	<gui-page class="container" :customFooter="true" :customHeader="true">
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 返回按钮 -->
				<gui-header-leading :backButtonClass="['gui-color-white']" :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h6 gui-flex1 gui-ellipsis gui-text-center gui-header-content gui-color-white">日报</text>
				<view style="width:60rpx;"></view>
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<view class="daily_time">
					<view style="position: relative;top: 30rpx;padding-left: 20rpx;padding-right: 20rpx;">
						<text style="color: rgb(109,124,149);">时间</text>
						<text style="color: rgb(109,124,149);float: right;">{{this.toDayTime}}</text>
					</view>
				</view>
				<view class="daily_work">
					<view style="padding-top:20rpx;">
						<text class="gui-text gui-color-black" style="color: rgb(12, 37, 78);">今日工作</text>
					</view>
					<view style="padding:15rpx 0;">
						<textarea v-model="content" name="content" placeholder="请输入"
							class="gui-textarea gui-bg-gray gui-white-bg-level-1"
							style="width:600rpx;height: 400rpx;"></textarea>
					</view>
					<view style="padding-top:20rpx;">
						<text class="gui-text gui-color-black" style="color: rgb(12, 37, 78);">今日状态</text>
					</view>
					<view style="padding:15rpx 0;">
						<picker mode="selector" :range="gender" @change="pickerChange">
							<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
								<text class="gui-text gui-secondary-text">{{gender[genderIndex]}}</text>
								<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</template>

		<template v-slot:gFooter>
			<view class="gui-padding">
				<view>
					<button @click="addDaily" type="default" class="gui-button gui-bg-blue gui-noborder">
						<text class="gui-color-white gui-button-text">保存日报</text>
					</button>
				</view>
			</view>

		</template>
	</gui-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import graceJS from "@/Grace6/js/grace.js";
	import BASE_URL from '@/config/api.js'
	export default {
		data() {
			return {
				content: '',
				id: '',
				status: '',
				gender: ['请选择状态', '在岗', '请假', '出差'],
				genderIndex: 0,
				toDayTime: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if (undefined != option.id) {
				var token = graceJS.getStorage('token');
				var userId = graceJS.getStorage('userId');
				graceJS.get(
					BASE_URL + '/display/daily/daily/queryById', {
						id: option.id
					}, {
						Token: token
					},
					(res) => {
						console.log(res);
						this.content = res.daily.content
						this.id = res.daily.id
					},
					(e) => {
						console.log(e);
					}
				);
			}
			const now = new Date();
			const year = now.getFullYear(); // 年
			const month = now.getMonth() + 1; // 月
			const date = now.getDate(); // 日
			this.toDayTime = year + '-' + month + '-' + date

		},
		methods: {
			pickerChange: function(e) {
				console.log(e);
				this.genderIndex = e.detail.value;
				this.status = this.gender[this.genderIndex];
			},
			addDaily() {
				var token = graceJS.getStorage('token');
				var userId = graceJS.getStorage('userId');
				console.log(userId)
				console.log(token)
				console.log(this.content)
				graceJS.post(
					BASE_URL + '/display/daily/daily/saveDaily', {
						content: this.content,
						id: this.id,
						status: this.status
					},
					'form', {
						Token: token
					},
					(res) => {
						if (res.success == true) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
							graceJS.navigate('/pages/index/index', 'navigateTo');
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
						console.log(res);

					},
					(e) => {
						console.log(e);
					}
				);
			}
		}
	}
</script>

<style scoped>
	.container {
		background-image: url(../../static/img/bj.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.text {
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		color: rgb(12, 37, 78);
		margin-top: 100rpx;
	}

	.daily_time {
		background-color: white;
		height: 100rpx;
		margin-top: 40rpx;
		border-radius: 0.5rem;
	}

	.daily_work {
		background-color: white;
		height: 700rpx;
		margin-top: 40rpx;
		border-radius: 0.5rem;
		padding: 20px;
	}
</style>